<template>
  <el-dialog
  title="分配权限"
  :visible.sync="dialogVisible"
  width="50%"
  @close="setRightDialogClosed"
  >
  <el-tree :data="rightslist" :props="treeProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKeys" ref="treeRef"></el-tree>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="allotRights">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible:false,
            rightslist:[],
            treeProps:{
                label:'authName',
                children:'children'
            },
            // 默认选中的节点id值
            defKeys:[],
            roleid:''
        }
    },
    methods:{
        // 监听权限对话框关闭
        setRightDialogClosed() {
            this.defKeys = []
        },
        async allotRights() {
            const keys = [
                ...this.$refs.treeRef.getCheckedKeys(),
                ...this.$refs.treeRef.getHalfCheckedKeys()
            ]

            const idStr = keys.join(',')

           const {data:res} = await this.$http.post(`roles/${this.roleid}/rights`,{ rids:idStr })
           if(res.meta.status !== 200) {
            return this.$message.error('分配权限失败！')
           }
           this.$message.success('分配权限成功！')
           this.dialogVisible = false
           this.$emit('getRoleList')
        }
    }
}
</script>

<style>

</style>